<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人才职业生涯规划平台</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="logo">
                <div class="location-info" id="user-location">
                    <i class="bi bi-geo-alt-fill location-icon"></i>
                    <span class="location-text">定位中...</span>
                </div>
            </div>
            <div class="search-bar">
                <i class="bi bi-search"></i>
                <input type="text" placeholder="搜索活动、企业、岗位...">
            </div>
            <div class="user-info">
                <i class="bi bi-bell"></i>
                <a href="pages/profile.html" class="avatar-link">
                    <div class="avatar"></div>
                </a>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 活动模块 -->
            <section class="module activities">
                <div class="module-header">
                    <h2>推荐活动</h2>
                    <a href="pages/activities.html" class="more">查看更多 <i class="bi bi-chevron-right"></i></a>
                </div>
                <div class="filter-tabs">
                    <div class="tab active">全部</div>
                    <div class="tab">职业讲座</div>
                    <div class="tab">企业开放日</div>
                    <div class="tab">技能竞赛</div>
                </div>
                <div class="card-container">
                    <a href="pages/activity-detail.html?id=1" class="card activity-card">
                        <div class="card-img">
                            <img src="img/activity1.jpg" alt="互联网产品经理实战营">
                            <span class="status ongoing">进行中</span>
                        </div>
                        <div class="card-body">
                            <h3>互联网产品经理实战营</h3>
                            <p class="info"><i class="bi bi-calendar"></i> 2023-04-15 14:00</p>
                            <p class="info"><i class="bi bi-geo-alt"></i> 线上</p>
                            <div class="card-footer">
                                <span class="participants"><i class="bi bi-people"></i> 132人参与</span>
                                <button class="like-btn"><i class="bi bi-heart"></i></button>
                            </div>
                        </div>
                    </a>
                    <a href="pages/activity-detail.html?id=2" class="card activity-card">
                        <div class="card-img">
                            <img src="img/activity2.jpg" alt="腾讯2023校园招聘宣讲会">
                            <span class="status upcoming">即将开始</span>
                        </div>
                        <div class="card-body">
                            <h3>腾讯2023校园招聘宣讲会</h3>
                            <p class="info"><i class="bi bi-calendar"></i> 2023-04-20 10:00</p>
                            <p class="info"><i class="bi bi-geo-alt"></i> 北京大学就业中心</p>
                            <div class="card-footer">
                                <span class="participants"><i class="bi bi-people"></i> 415人参与</span>
                                <button class="like-btn"><i class="bi bi-heart"></i></button>
                            </div>
                        </div>
                    </a>
                    <a href="pages/activity-detail.html?id=3" class="card activity-card">
                        <div class="card-img">
                            <img src="img/activity3.jpg" alt="2023全国大学生编程大赛">
                            <span class="status ended">已结束</span>
                        </div>
                        <div class="card-body">
                            <h3>2023全国大学生编程大赛</h3>
                            <p class="info"><i class="bi bi-calendar"></i> 2023-03-25 09:00</p>
                            <p class="info"><i class="bi bi-geo-alt"></i> 线上</p>
                            <div class="card-footer">
                                <span class="participants"><i class="bi bi-people"></i> 3240人参与</span>
                                <button class="like-btn"><i class="bi bi-heart"></i></button>
                            </div>
                        </div>
                    </a>
                </div>
            </section>

            <!-- 学校/企业列表模块 -->
            <section class="module institutions">
                <div class="module-header">
                    <h2>院校与企业</h2>
                    <div class="tabs">
                        <div class="tab active" data-target="schools">热门高校</div>
                        <div class="tab" data-target="companies">知名企业</div>
                    </div>
                    <a href="pages/institutions.html" class="more">查看更多 <i class="bi bi-chevron-right"></i></a>
                </div>
                <div class="card-container schools-container active">
                    <a href="pages/school-detail.html?id=s1" class="card institution-card">
                        <div class="card-img">
                            <img src="img/school1.jpg" alt="清华大学">
                            <span class="tag elite">985/211</span>
                        </div>
                        <div class="card-body">
                            <h3>清华大学</h3>
                            <p class="location"><i class="bi bi-geo-alt"></i> 北京市</p>
                            <div class="features">
                                <span class="feature">计算机</span>
                                <span class="feature">电子工程</span>
                                <span class="feature">经济管理</span>
                            </div>
                            <p class="employment-rate">就业率: 98.6%</p>
                        </div>
                    </a>
                    <a href="pages/school-detail.html?id=s2" class="card institution-card">
                        <div class="card-img">
                            <img src="img/school2.jpg" alt="复旦大学">
                            <span class="tag elite">985/211</span>
                        </div>
                        <div class="card-body">
                            <h3>复旦大学</h3>
                            <p class="location"><i class="bi bi-geo-alt"></i> 上海市</p>
                            <div class="features">
                                <span class="feature">医学</span>
                                <span class="feature">金融</span>
                                <span class="feature">新闻传播</span>
                            </div>
                            <p class="employment-rate">就业率: 97.2%</p>
                        </div>
                    </a>
                    <a href="pages/school-detail.html?id=s3" class="card institution-card">
                        <div class="card-img">
                            <img src="img/school3.jpg" alt="浙江大学">
                            <span class="tag elite">985/211</span>
                        </div>
                        <div class="card-body">
                            <h3>浙江大学</h3>
                            <p class="location"><i class="bi bi-geo-alt"></i> 杭州市</p>
                            <div class="features">
                                <span class="feature">人工智能</span>
                                <span class="feature">农学</span>
                                <span class="feature">管理学</span>
                            </div>
                            <p class="employment-rate">就业率: 97.8%</p>
                        </div>
                    </a>
                </div>
                <div class="card-container companies-container">
                    <a href="pages/company-detail.html?id=c1" class="card institution-card">
                        <div class="card-img">
                            <img src="img/company1.jpg" alt="腾讯">
                            <span class="tag company">互联网</span>
                        </div>
                        <div class="card-body">
                            <h3>腾讯</h3>
                            <p class="location"><i class="bi bi-geo-alt"></i> 深圳市</p>
                            <div class="features">
                                <span class="feature">技术研发</span>
                                <span class="feature">产品运营</span>
                                <span class="feature">市场营销</span>
                            </div>
                            <p class="employee-count">员工规模: 85,000+</p>
                        </div>
                    </a>
                     <a href="pages/company-detail.html?id=c2" class="card institution-card">
                        <div class="card-img">
                            <img src="img/company2.jpg" alt="阿里巴巴">
                            <span class="tag company">互联网</span>
                        </div>
                        <div class="card-body">
                            <h3>阿里巴巴</h3>
                            <p class="location"><i class="bi bi-geo-alt"></i> 杭州市</p>
                            <div class="features">
                                <span class="feature">电子商务</span>
                                <span class="feature">云计算</span>
                                <span class="feature">金融科技</span>
                            </div>
                            <p class="employee-count">员工规模: 250,000+</p>
                        </div>
                    </a>
                    <a href="pages/company-detail.html?id=c3" class="card institution-card">
                        <div class="card-img">
                            <img src="img/company3.jpg" alt="华为">
                            <span class="tag company">通信/制造</span>
                        </div>
                        <div class="card-body">
                            <h3>华为</h3>
                            <p class="location"><i class="bi bi-geo-alt"></i> 深圳市</p>
                            <div class="features">
                                <span class="feature">通信技术</span>
                                <span class="feature">智能终端</span>
                                <span class="feature">芯片设计</span>
                            </div>
                            <p class="employee-count">员工规模: 190,000+</p>
                        </div>
                    </a>
                </div>
            </section>

            <!-- 实习岗位列表模块 -->
            <section class="module internships">
                <div class="module-header">
                    <h2>热门实习</h2>
                    <a href="pages/internships.html" class="more">查看更多 <i class="bi bi-chevron-right"></i></a>
                </div>
                <div class="filter-area">
                    <div class="filter-row">
                        <span class="filter-label">行业:</span>
                        <div class="filter-options">
                            <span class="filter-option active">全部</span>
                            <span class="filter-option">互联网</span>
                            <span class="filter-option">金融</span>
                            <span class="filter-option">教育</span>
                            <span class="filter-option">制造业</span>
                            <span class="filter-option">医疗健康</span>
                        </div>
                    </div>
                    <div class="filter-row">
                        <span class="filter-label">薪资:</span>
                        <div class="filter-options">
                            <span class="filter-option active">全部</span>
                            <span class="filter-option">3k以下</span>
                            <span class="filter-option">3k-5k</span>
                            <span class="filter-option">5k-8k</span>
                            <span class="filter-option">8k以上</span>
                        </div>
                    </div>
                </div>
                <div class="list-container">
                    <a href="pages/internship-detail.html?id=i1" class="card job-card">
                        <div class="company-logo">
                            <img src="img/company-logo1.jpg" alt="字节跳动">
                        </div>
                        <div class="card-body">
                            <div class="job-info">
                                <h3>前端开发实习生</h3>
                                <p class="company-name">字节跳动</p>
                                <div class="tags">
                                    <span class="tag">React</span>
                                    <span class="tag">Vue</span>
                                    <span class="tag">本科及以上</span>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span class="salary">6k-8k/月</span>
                                <span class="location">北京</span>
                                <button class="apply-btn">立即申请</button>
                            </div>
                        </div>
                    </a>
                    <a href="pages/internship-detail.html?id=i2" class="card job-card">
                        <div class="company-logo">
                            <img src="img/company-logo2.jpg" alt="阿里巴巴">
                        </div>
                        <div class="card-body">
                            <div class="job-info">
                                <h3>产品经理实习生</h3>
                                <p class="company-name">阿里巴巴</p>
                                <div class="tags">
                                    <span class="tag">产品分析</span>
                                    <span class="tag">数据分析</span>
                                    <span class="tag">本科及以上</span>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span class="salary">5k-7k/月</span>
                                <span class="location">杭州</span>
                                <button class="apply-btn">立即申请</button>
                            </div>
                        </div>
                    </a>
                    <a href="pages/internship-detail.html?id=i3" class="card job-card">
                        <div class="company-logo">
                            <img src="img/company-logo3.jpg" alt="腾讯">
                        </div>
                        <div class="card-body">
                            <div class="job-info">
                                <h3>后端开发实习生</h3>
                                <p class="company-name">腾讯</p>
                                <div class="tags">
                                    <span class="tag">Java</span>
                                    <span class="tag">Go</span>
                                    <span class="tag">本科及以上</span>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span class="salary">7k-9k/月</span>
                                <span class="location">深圳</span>
                                <button class="apply-btn">立即申请</button>
                            </div>
                        </div>
                    </a>
                    <a href="pages/internship-detail.html?id=i4" class="card job-card">
                        <div class="company-logo">
                            <img src="img/company-logo4.jpg" alt="百度">
                        </div>
                        <div class="card-body">
                            <div class="job-info">
                                <h3>AI算法实习生</h3>
                                <p class="company-name">百度</p>
                                <div class="tags">
                                    <span class="tag">Python</span>
                                    <span class="tag">机器学习</span>
                                    <span class="tag">硕士及以上</span>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span class="salary">8k-10k/月</span>
                                <span class="location">北京</span>
                                <button class="apply-btn">立即申请</button>
                            </div>
                        </div>
                    </a>
                </div>
            </section>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <a href="index.html" class="tab-item active" data-page="index">
                <i class="bi bi-house-door-fill"></i>
                <span>首页</span>
            </a>
            <a href="pages/discover.html" class="tab-item" data-page="discovery">
                <i class="bi bi-compass"></i>
                <span>发现</span>
            </a>
            <a href="pages/agents.html" class="tab-item" data-page="agents">
                 <i class="bi bi-person-rolodex"></i>
                <span>经纪人</span>
            </a>
            <a href="pages/profile.html" class="tab-item" data-page="profile">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </a>
        </footer>
    </div>

    <script src="js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化地理位置功能
            initUserLocation();
            
            // 初始化底部导航栏
            initTabBar();
            
            // 确保图片自动加载
            handleImageErrors();
            
            // 处理首页院校企业切换
            const tabs = document.querySelectorAll('.institutions .tabs .tab');
            const schoolContainer = document.querySelector('.institutions .schools-container');
            const companyContainer = document.querySelector('.institutions .companies-container');

            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    const target = this.getAttribute('data-target');
                    if (target === 'schools') {
                        schoolContainer.classList.add('active');
                        companyContainer.classList.remove('active');
                    } else {
                        schoolContainer.classList.remove('active');
                        companyContainer.classList.add('active');
                    }
                });
            });

            // 处理实习模块筛选点击
            const filterOptions = document.querySelectorAll('.internships .filter-option');
            filterOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const parentRow = this.closest('.filter-options');
                    parentRow.querySelectorAll('.filter-option').forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加根据筛选条件重新加载实习列表的逻辑
                });
            });
            
            // 处理活动模块筛选点击
            const activityFilterTabs = document.querySelectorAll('.activities .filter-tabs .tab');
            activityFilterTabs.forEach(tab => {
                 tab.addEventListener('click', function() {
                    activityFilterTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加根据筛选条件重新加载活动列表的逻辑
                 });
            });

            // 处理实习申请按钮点击（阻止事件冒泡）
            const applyBtns = document.querySelectorAll('.job-card .apply-btn');
            applyBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault(); // 阻止链接跳转
                    e.stopPropagation(); // 阻止事件冒泡到父级<a>标签
                    // 在实际应用中，这里可能需要检查登录状态或弹出确认框
                    const internshipLink = this.closest('a').href;
                    window.location.href = internshipLink; // 手动跳转
                    console.log('申请了实习:', internshipLink);
                });
            });
             // 处理活动喜欢按钮点击（阻止事件冒泡）
            const likeBtns = document.querySelectorAll('.activity-card .like-btn');
            likeBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault(); // 阻止链接跳转
                    e.stopPropagation(); // 阻止事件冒泡到父级<a>标签
                    const icon = this.querySelector('i');
                    icon.classList.toggle('bi-heart');
                    icon.classList.toggle('bi-heart-fill');
                    // 可以添加发送收藏/取消收藏请求到服务器的逻辑
                });
            });

        });
        
        /**
         * 初始化用户位置功能
         */
        function initUserLocation() {
            const locationElement = document.getElementById('user-location');
            const locationText = locationElement.querySelector('.location-text');
            
            // 默认位置
            const defaultLocation = '北京市';
            
            // 检查是否已有缓存的位置信息
            const cachedLocation = localStorage.getItem('userLocation');
            const cachedTimestamp = localStorage.getItem('locationTimestamp');
            const locationAge = cachedTimestamp ? (Date.now() - parseInt(cachedTimestamp)) / (1000 * 60 * 60) : 24; // 转换为小时
            
            // 如果有缓存且不超过12小时，直接使用缓存
            if (cachedLocation && locationAge < 12) {
                locationText.textContent = cachedLocation;
                // 添加点击事件以重新获取位置
                locationElement.addEventListener('click', getUserLocation);
                return;
            }
            
            // 获取用户地理位置
            getUserLocation();
            
            // 添加点击事件以重新获取位置
            locationElement.addEventListener('click', getUserLocation);
            
            // 地理位置获取函数
            function getUserLocation() {
                // 显示正在定位状态
                locationText.textContent = '定位中...';
                locationElement.classList.add('locating');
                
                // 检查浏览器是否支持地理定位
                if (navigator.geolocation) {
                    // 尝试获取位置
                    navigator.geolocation.getCurrentPosition(
                        // 成功回调
                        function(position) {
                            // 使用位置坐标获取城市名称
                            getCityNameFromCoords(position.coords.latitude, position.coords.longitude);
                        },
                        // 错误回调
                        function(error) {
                            console.error('位置获取失败:', error);
                            // 降级到IP定位
                            getCityFromIP();
                        },
                        // 选项
                        { 
                            enableHighAccuracy: false, // 不需要高精度
                            timeout: 5000, // 5秒超时
                            maximumAge: 0 // 不使用缓存
                        }
                    );
                } else {
                    // 浏览器不支持地理定位
                    console.log('浏览器不支持地理定位');
                    // 降级到IP定位
                    getCityFromIP();
                }
            }
            
            // 从坐标获取城市名称（模拟实现，实际应使用地图API）
            function getCityNameFromCoords(latitude, longitude) {
                // 这里应该调用地图服务API，如百度地图、高德地图或天地图等
                // 由于这是模拟实现，我们使用随机城市
                const cities = ['北京市', '上海市', '广州市', '深圳市', '杭州市', '南京市', '成都市', '武汉市', '西安市', '重庆市'];
                const randomCity = cities[Math.floor(Math.random() * cities.length)];
                
                // 模拟API请求延迟
                setTimeout(() => {
                    updateLocationDisplay(randomCity);
                }, 1000);
            }
            
            // 从IP获取城市名称（模拟实现）
            function getCityFromIP() {
                // 这里应该调用IP定位服务API
                // 由于这是模拟实现，我们使用随机城市
                const cities = ['北京市', '上海市', '广州市', '深圳市', '杭州市', '南京市', '成都市', '武汉市', '西安市', '重庆市'];
                const randomCity = cities[Math.floor(Math.random() * cities.length)];
                
                // 模拟API请求延迟
                setTimeout(() => {
                    updateLocationDisplay(randomCity);
                }, 800);
            }
            
            // 更新位置显示
            function updateLocationDisplay(cityName) {
                locationText.textContent = cityName || defaultLocation;
                
                // 移除加载动画
                locationElement.classList.remove('locating');
                
                // 缓存位置信息
                localStorage.setItem('userLocation', cityName || defaultLocation);
                localStorage.setItem('locationTimestamp', Date.now().toString());
                
                // 触发位置更新事件
                const event = new CustomEvent('locationUpdated', { detail: { location: cityName || defaultLocation } });
                document.dispatchEvent(event);
            }
        }
    </script>
    <script src="js/nav.js"></script>
</body>
</html> 